<template>
  <view>
    <view
      :style="{width: width+'rpx', height: height+'rpx'}"
      :class="['h-button','h-button-'+type ,className, disabled ? 'h-button-disabled': '']"
      @tap="handleBtn"
    >
      <slot></slot>
    </view>
  </view>

</template>

<script>
export default {
  name: "hButton",
  props: {
    type: {
      type: String,
      default: 'default'
    },
    className: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 157
    },
    height: {
      type: Number,
      default: 55
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleBtn() {
      if(this.disabled) {
        return
      }
      this.$emit('tap')
    }
  }
}
</script>

<style>
.h-button {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26rpx;
  color: #fff;
  border-radius: 27.5rpx;
  width: 157rpx;
  height: 55rpx;
}
.h-button-default {
  background-color: #efefef;
  color: #010101;
}
.h-button-primary {
  background-image: linear-gradient(to right, #d5ad57, #d69b1d);
  color: #fff;
}
.h-button-text {
  background-color: rgba(0,0,0,0);
  color: #f34040;
}
.h-button-disabled {
  background-color: #cbcbcb;
  color: #888787;
  background-image: linear-gradient(to right, #cbcbcb, #cbcbcb);
}
</style>
